import { Card, message, notification } from 'antd';
import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { lists as getLists, update as updateApi } from '@/services/system/channel_config';
import WxMini from './components/WxMini';
import { NORMAL_CODE } from '@/constants';

/**
 * 列表
 * @param param
 */
const handleList = async (param) => {
  try {
    const res = await getLists(param);
    if (res.code !== NORMAL_CODE) {
      notification['error']({
        message: '获取失败',
        description: res.msg,
      });
      return [];
    } else {
      return res.data.list;
    }
  } catch (error) {
    notification['error']({
      message: '获取失败',
      description: '请求异常',
    });
    return [];
  }
};
/**
 * 更新
 * @param param
 */
const handleUpdate = async (param) => {
  const hide = message.loading('正在更新');
  let status = false;
  try {
    const res = await updateApi(param);
    if (res.code !== NORMAL_CODE) {
      status = false;
      notification['error']({
        message: '更新失败',
        description: res.msg,
      });
    } else {
      status = true;
      notification['success']({
        message: '更新成功',
        description: res.msg,
      });
    }
  } catch (error) {
    notification['error']({
      message: '更新失败',
      description: '请求异常',
    });
    status = false;
  }
  hide();
  return status;
};

const TabList: React.FC = () => {
  const [activeChannel, setactiveChannel] = useState('');
  const [data, setData] = useState({});
  const [dataList, setDataList] = useState([]);

  useEffect(() => {
    const asyncFn = async () => {
      let data = await handleList({
        search_page: 1,
        search_limit: 0,
      });
      setDataList(data);
      if (data.length > 0) {
        setData({
          channel: data[0].channel,
          ...data[0].config,
        });
        setactiveChannel(data[0].channel);
      }
    };
    asyncFn();
  }, []);

  const tabList = {
    wx_mini: (
      <WxMini
        onSubmit={async (param) => {
          await handleUpdate(param);
          let data = await handleList({
            search_page: 1,
            search_limit: 0,
          });
          setDataList(data);
        }}
        values={data}
      />
    ),
    estate: (
      <Estate
        onSubmit={async (param) => {
          await handleUpdate(param);
          let data = await handleList({
            search_page: 1,
            search_limit: 0,
          });
          setDataList(data);
        }}
        values={data}
      />
    ),
  };

  return (
    <PageContainer title={false}>
      <>
        {dataList.length > 0 && (
          <Card
            style={{ width: '100%' }}
            tabList={dataList.map((item, index) => {
              return {
                key: item.channel,
                tab: item.name,
              };
            })}
            activeTabKey={activeChannel}
            onTabChange={(key) => {
              setactiveChannel(key);
              dataList.forEach((item) => {
                if (item.channel == key) {
                  setData({
                    channel: item.channel,
                    ...item.config,
                  });
                }
              });
            }}
          >
            {tabList[activeChannel]}
          </Card>
        )}
      </>
    </PageContainer>
  );
};

export default TabList;
